<!-------------------------menu------------------------------------>
<link href="<?= url_tmpl() ?>css/menu.css" rel="stylesheet">
<script type="text/javascript">
    
    //var url = '<?= base_url() ?>';

    $(document).mouseup(function()
    {
        $("#nav .selected div div").slideUp(100); // hiding popups
        $("#nav .selected").removeClass("selected");
        //tat info
        $('.infouser').fadeOut(100);
    });

    jQuery(window).load(function() {  
        $('.homehays').click(function(){
            window.location.href = '<?= base_url() ?>'; 
        });
        
        
        //show info when click imguser
        $('.imguser').click(function(){
            $('.infouser').fadeIn(100);
        });

        $("#nav > li > a").click(function() { // binding onclick
            if ($(this).parent().hasClass('selected')) {
                $("#nav .selected div div").slideUp(100); // hiding popups
                $("#nav .selected").removeClass("selected");
            } else {
                $("#nav .selected div div").slideUp(100); // hiding popups
                $("#nav .selected").removeClass("selected");

                if ($(this).next(".subs").length) {
                    $(this).parent().addClass("selected"); // display popup
                    $(this).next(".subs").children().slideDown(200);
                }
            }
        });

    });
</script>

<div class="header">    
    <div class="breadcrumb">        
        <div class="homehays"></div>
        <ul id="nav">
            <li><a href="#">Tutorials<span class="gbma"></span></a>
                <div class="subs">
                    <div>
                        <ul>
                            <li>
                                <h3>Submenu #1</h3>
                                <ul>
                                    <li><a href="#">Link 1</a></li>
                                    <li><a href="#">Link 2</a></li>
                                    <li><a href="#">Link 3</a></li>
                                    <li><a href="#">Link 4</a></li>
                                    <li><a href="#">Link 5</a></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Submenu #2</h3>
                                <ul>
                                    <li><a href="#">Link 6</a></li>
                                    <li><a href="#">Link 7</a></li>
                                    <li><a href="#">Link 8</a></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Submenu #3</h3>
                                <ul>
                                    <li><a href="#">Link 9</a></li>
                                    <li><a href="#">Link 10</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="subs">
                    <div>
                        <ul>
                            <li>
                                <h3>Submenu #1</h3>
                                <ul>
                                    <li><a href="#">Link 1</a></li>
                                    <li><a href="#">Link 2</a></li>
                                    <li><a href="#">Link 3</a></li>
                                    <li><a href="#">Link 4</a></li>
                                    <li><a href="#">Link 5</a></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Submenu #2</h3>
                                <ul>
                                    <li><a href="#">Link 6</a></li>
                                    <li><a href="#">Link 7</a></li>
                                    <li><a href="#">Link 8</a></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Submenu #3</h3>
                                <ul>
                                    <li><a href="#">Link 9</a></li>
                                    <li><a href="#">Link 10</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

            <li><a href="#">Resources<span class="gbma"></span></a>
                <div class="subs">
                    <div class="wrp2">
                        <ul>
                            <li>
                                <h3>Submenu #4</h3>
                                <ul>
                                    <li><a href="#">Link 1</a></li>
                                    <li><a href="#">Link 2</a></li>
                                    <li><a href="#">Link 3</a></li>
                                    <li><a href="#">Link 4</a></li>
                                    <li><a href="#">Link 5</a></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Submenu #5</h3>
                                <ul>
                                    <li><a href="#">Link 6</a></li>
                                    <li><a href="#">Link 7</a></li>
                                    <li><a href="#">Link 8</a></li>
                                    <li><a href="#">Link 9</a></li>
                                    <li><a href="#">Link 10</a></li>
                                </ul>
                            </li>
                        </ul>
                        <p class="sep"></p>
                        <ul class="left20">
                            <li>
                                <h3>Submenu #6</h3>
                                <ul>
                                    <li><a href="#">Link 11</a></li>
                                    <li><a href="#">Link 12</a></li>
                                    <li><a href="#">Link 13</a></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Submenu #7</h3>
                                <ul>
                                    <li><a href="#">Link 14</a></li>
                                    <li><a href="#">Link 15</a></li>
                                    <li><a href="#">Link 16</a></li>
                                </ul>
                            </li>
                            <li>
                                <h3>Submenu #8</h3>
                                <ul>
                                    <li><a href="#">Link 17</a></li>
                                    <li><a href="#">Link 18</a></li>
                                    <li><a href="#">Link 19</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>

        <div class="float-right">          
           
            <?= $data; ?>

        </div>

    </div>
</div>
<div class="finish_header"></div>
